<template>
  <div class="rigister">
    <div class="close">
      <img :src="ImgSrc">
    </div>
    <form class="form">
      <div>
        <h2>穿云箭</h2>
        <p>一只穿云箭，千军万马来相见</p>
      </div>
      <!--验证码-->
      <div class="user" @click="" :style="border3">
        <label for="rightCode"><img :src="Images.verification"></label>
        <input id="rightCode" @blur="bl3" @focus="fs3"  type="text" placeholder="请输入右侧验证码" v-model="rerifyCode">
        <span>验证码</span>
      </div>
      <!--邮箱-->
      <div class="user"  :style="border4">
        <label for="user"><img :src="Images.email"></label>
        <input id="user" type="email"  @focus="fs4" @blur="bl4" placeholder="邮箱"   v-model="userEmail">
      </div>
      <!--邮箱验证码-->
      <div class="user" :style="border5">
        <label for="emailCode"><img :src="Images.emailGet"></label>
        <input id="emailCode" type="text" @focus="fs5" @blur="bl5" placeholder="请输入邮箱验证码" v-model="emailCode">
        <span><button :disabled="disabled" id="obtain" @click="obtain">{{leftText}}</button></span>
      </div>
      <!--密码-->
      <div class="user"  :style="border6">
        <label for="psw"><img :src="Images.pwd"></label>
        <input id="psw" type="password" @focus="fs6" @blur="bl6" placeholder="请输入密码" v-model="userPWD">
      </div>
      <!--邀请码-->
      <div class="user"  :style="border7">
        <label for="request"><img :src="Images.invite"></label>
        <input id="request" type="text" @focus="fs7" @blur="bl7" placeholder="请输入邀请码" v-model="requestCode">
      </div>
      <div class="button">
        <button @click="popupR">注册</button>
      </div>
    </form>
  </div>
</template>
<script>
  import imgLogo from '../../assets/LOGO_color.png'
  //密码
  import pwdImg2 from '../../assets/icon_password_sign.png'
  import pwdImg11 from '../../assets/icon_password_sign_mark.png'
  //右侧验证码
  import verification from '../../assets/icon_verification_image.png'
  import verification1 from '../../assets/icon_verification_image_mark.png'
  //邮箱
  import email from '../../assets/icon_verification_email.png'
  import email1 from '../../assets/icon_verification_email_mark.png'
  //验证码
  import emailGet from '../../assets/icon_email.png'
  import emailGet1 from '../../assets/icon_email_mark.png'
  //邀请码
  import invite from '../../assets/icon_invite_sign.png'
  import invite1 from '../../assets/icon_invite_sign_mark.png'

  export default{
    data (){
      return{
        Images:{
          verification:verification,
          email:email,
          emailGet:emailGet,
          invite:invite,
          pwd:pwdImg2
        },
        ImgSrc:imgLogo,
        border3:{
          borderBottomColor:'',
        },
        border4:{
          borderBottomColor:'',
        },
        border5:{
          borderBottomColor:'',
        },
        border6:{
          borderBottomColor:'',
        },
        border7:{
          borderBottomColor:'',
        },
        //focusStatus:false,
        userEmail:'',
        userPWD:'',
        //验证码
        rerifyCode:'',
        //邮箱验证码
        emailCode:'',
        //邀请码
        requestCode:'',
        //邮箱验证码
        leftText:'获取',
        disabled:false
      }
    },
    //方法
    methods:{
      popupR:function () {
        this.$emit('listenLogin',false);
      },
      //失去焦点
      bl3:function () {
        var _self = this;
        _self.$set(_self.Images,'verification',verification);
        _self.$set(_self.border3,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs3:function () {
        var _self = this;
        _self.$set(_self.Images,'verification',verification1);
        _self.$set(_self.border3,'borderBottomColor','#FF7A3F');
      },
      //失去焦点
      bl4:function () {
        var _self = this;
        _self.$set(_self.Images,'email',email);
        _self.$set(_self.border4,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs4:function () {
        var _self = this;
        _self.$set(_self.Images,'email',email1);
        _self.$set(_self.border4,'borderBottomColor','#FF7A3F');
      },
      //失去焦点
      bl5:function () {
        var _self = this;
        _self.$set(_self.Images,'emailGet',emailGet);
        _self.$set(_self.border5,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs5:function () {
        var _self = this;
        _self.$set(_self.Images,'emailGet',emailGet1);
        _self.$set(_self.border5,'borderBottomColor','#FF7A3F');
      },
      //失去焦点
      bl6:function () {
        var _self = this;
        _self.$set(_self.Images,'pwd',pwdImg2);
        _self.$set(_self.border6,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs6:function () {
        var _self = this;
        _self.$set(_self.Images,'pwd',pwdImg11);
        _self.$set(_self.border6,'borderBottomColor','#FF7A3F');
      },
      //失去焦点
      bl7:function () {
        var _self = this;
        _self.$set(_self.Images,'invite',invite);
        _self.$set(_self.border7,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs7:function () {
        var _self = this;
        _self.$set(_self.Images,'invite',invite1);
        _self.$set(_self.border7,'borderBottomColor','#FF7A3F');
      },
      //获取邮箱验证码
      obtain:function(){
          console.log(123)
          var _self = this;
          _self.disabled = true;
          _self.leftText ='已发送'
      }
    },
    //实例建立后执行
    mounthed:{

    },
    //监听事件
    watch:{

    }
  }

</script>
<style scoped>
  div h2{
    margin: 0;
    padding: 0;
  }
  img{
    max-height: 100%;
    max-width:100%
  }
  input{
    border: 0;
    text-indent: 1rem;
    outline:none
  }

  .rigister{
    position: fixed;
    top:50%;
    left: 50%;
    height: 580px;
    width: 420px;
    margin-left: -210px;
    margin-top: -290px;
    z-index: 9999;
    overflow: hidden;
    font-size: 0;
  }
  .close{
    margin:0 auto;
    width: 100px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 100px 100px 0 0;
  }
  .close img{
    margin-top: 20px;
  }
  form{
    text-align: center;
    background-color: #ffffff;
    padding-top: 10px;
    margin: 0;
  }
  form div{
    padding: 15px 0px 10px 5px;
  }
  h2{
    font-size: 1.0rem;
    font-weight: 100;
    color:#FF7A3F;
  }
  p{
    font-size: 0.7rem;
    font-weight: 100;
    color:#FF7A3F;
    padding: 20px 0 10px;
  }
  .form .user{
    margin: auto;
    border-bottom: 1px solid rgba(123,128,128,0.2);
    width: 270px;
    text-align: left;
  }

  .form  span{
    font-size: 0.5rem;
    text-align: right;
    cursor: pointer;
    float: right;
  }
  .form .password span:hover{
    color:#FF7A3F;
  }
  #obtain{
    border: 0;
    padding: 5px 2px;
    width: 55px;
    color: #ffffff;
    background-color: #FF7A3F;
    margin-top: -6px;
    outline: none;
    border-radius: 2px;
    cursor: pointer;
  }
  .form .button button{
    width: 250px;
    height: 2rem;
    background-color: #FF7A3F;
    color: #ffffff;
    border: 0;
    margin: 30px 0 30px 0 ;
    outline: none;
    border-radius: 2px;
  }
  .form .button button:hover{
    background-color: red;
    cursor: pointer;
  }
</style>
